<template>
  <div class="test-data">
    <h1>数据测试页面</h1>
    <p>这是一个测试数据功能的页面，用于检查应用的数据处理能力。</p>
    
    <div class="test-section">
      <h2>1. Vue实例属性测试</h2>
      <p v-if="isHttpAvailable">$http 实例可用</p>
      <p v-else class="error">$http 实例不可用</p>
      <p v-if="isUniAvailable">$uni 实例可用</p>
      <p v-else class="error">$uni 实例不可用</p>
    </div>
    
    <div class="test-section">
      <h2>2. 本地存储测试</h2>
      <button @click="testLocalStorage">测试本地存储</button>
      <p v-if="storageResult">{{ storageResult }}</p>
    </div>
    
    <div class="test-section">
      <h2>3. 网络请求模拟</h2>
      <button @click="testHttpRequest">模拟HTTP请求</button>
      <p v-if="requestResult">{{ requestResult }}</p>
      <p v-if="requestError" class="error">{{ requestError }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TestData',
  data() {
    return {
      isHttpAvailable: false,
      isUniAvailable: false,
      storageResult: '',
      requestResult: '',
      requestError: ''
    }
  },
  mounted() {
    console.log('数据测试页面已加载')
    
    // 检查Vue实例属性是否可用
    this.isHttpAvailable = !!this.$http
    this.isUniAvailable = !!this.$uni
    
    console.log('$http实例:', this.$http)
    console.log('$uni实例:', this.$uni)
  },
  methods: {
    testLocalStorage() {
      try {
        // 测试本地存储功能
        const testKey = 'test_key'
        const testValue = 'test_value_' + new Date().getTime()
        
        // 写入存储
        this.$uni.setStorageSync(testKey, testValue)
        
        // 读取存储
        const retrievedValue = this.$uni.getStorageSync(testKey)
        
        // 验证结果
        if (retrievedValue === testValue) {
          this.storageResult = `本地存储测试成功: ${retrievedValue}`
        } else {
          this.storageResult = '本地存储测试失败: 存储的值不匹配'
        }
      } catch (error) {
        this.storageResult = `本地存储测试异常: ${error.message}`
      }
    },
    testHttpRequest() {
      try {
        this.requestResult = ''
        this.requestError = ''
        
        // 测试HTTP请求功能
        console.log('尝试发送HTTP请求...')
        
        // 使用模拟数据，不实际发送请求到后端
        setTimeout(() => {
          this.requestResult = 'HTTP请求模拟成功: 这是一个模拟的响应数据'
          console.log('HTTP请求模拟完成')
        }, 1000)
        
        /* 注释掉实际的HTTP请求，使用模拟数据
        this.$http.get('/api/test').then(response => {
          this.requestResult = `HTTP请求成功: ${JSON.stringify(response)}`
        }).catch(error => {
          this.requestError = `HTTP请求失败: ${error.message}`
        })
        */
      } catch (error) {
        this.requestError = `HTTP请求异常: ${error.message}`
      }
    }
  }
}
</script>

<style scoped>
.test-data {
  padding: 20px;
  text-align: center;
}

.test-section {
  margin: 30px 0;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: #f9f9f9;
}

h1 {
  color: #07c160;
  margin-bottom: 20px;
}

h2 {
  color: #333;
  margin-bottom: 15px;
  font-size: 18px;
}

p {
  color: #333;
  margin-bottom: 10px;
}

.error {
  color: #e64340;
}

button {
  background-color: #07c160;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

button:hover {
  background-color: #06ad56;
}
</style>